  <template>
   <div> 
      <el-row :gutter="20">
      <el-col :span="6"><div class="grid-content bg-purple"></div></el-col>
      <el-col :span="6"><div class="grid-content bg-purple"></div></el-col>
      <el-col :span="6"><div class="grid-content bg-purple"></div></el-col>
      <el-col :span="6"><div class="grid-content bg-purple"></div></el-col>
      </el-row>
      <el-row :gutter="20">
      <el-col :span="6"><div class="grid-content bg-purple"></div></el-col>
      <el-col :span="6"><div class="grid-content bg-purple"></div></el-col>
      <el-col :span="6"><div class="grid-content bg-purple"></div></el-col>
      <el-col :span="6"><div class="grid-content bg-purple"></div></el-col>
      </el-row>
      <el-row :gutter="20">
      <el-col :span="6"><div class="grid-content bg-purple"></div></el-col>
      <el-col :span="6"><div class="grid-content bg-purple"></div></el-col>
      <el-col :span="6"><div class="grid-content bg-purple"></div></el-col>
      <el-col :span="6"><div class="grid-content bg-purple"></div></el-col>
      </el-row>
      <el-table :data="jokes">
      <el-table-column label="国家" prop="country" align="center"></el-table-column> 
       <el-table-column label="省份" prop="province" align="center"></el-table-column>
      <el-table-column label="感染人数" prop="confirmed" align="center"></el-table-column>
      <el-table-column label="死亡人数" prop="dead" align="center"></el-table-column>
      <el-table-column label="治愈人数" prop="outside" align="center" ></el-table-column>
    </el-table>
  </div>
</template>
<script>
import { get } from '@/utils/request'
export default { 
  // 生命周期
  mounted(){
    // 初始化操作
    this.loadJokes();
  },
  // 数据
  data(){
    return {
      
      jokes:[]
    }
  },
  // 方法
  methods:{
    // 加载笑话数据
    loadJokes(){
      // 定义变量，请求地址
      let url = "http://cyjclub.top:8001//epidemic/pageQuery"
      // 请求参数
      let param = {
        page:1,
        pageSize:20,
   
       
      }
      // 请求后台数据
      get(url,param).then( resp => {
        // 将返回结果中有价值的信息赋值给jokes, jokes表示所有的笑话
        this.jokes = resp.data.list;
      });
    }
  }
}
</script>
<style >
    
  .el-row {
    margin-bottom: 20px;
  
  }
  
  .el-col {
    border-radius: 10px;
  }
  .bg-purple-dark {
    background: #99a9bf;
  }
  .bg-purple {
    background: #d3dce6;
  }
  .bg-purple-light {
    background: #e5e9f2;
  }
  .grid-content {
    border-radius: 50px;
    min-height: 90px;
  }
  .row-bg {
    padding: 67px 0;
    background-color: #f9fafc;
  }
</style>